<template>
  <el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>用户列表</span>
			<!-- <el-button style="float: right; padding: 3px 0" type="text" @click="showClientCreateForm=true">新增用户</el-button> -->
		</div>
		<el-table
			:data="clientListData"
			style="width: 100%">
			<el-table-column label="用户id">
				<template slot-scope="scope">
					<i class="el-icon-key"></i>
					<span style="margin-left: 10px">{{ scope.row.id }}</span>
				</template>
			</el-table-column>
			<el-table-column label="用户学号">
				<template slot-scope="scope">
					<i class="el-icon-tickets"></i>
					<span style="margin-left: 10px">{{ scope.row.username }}</span>
				</template>
			</el-table-column>
			<el-table-column label="用户名">
				<template slot-scope="scope">
					<el-tag type="success" >{{ scope.row.name }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="所在学院">
				<template slot-scope="scope">
					<i class="el-icon-star-off"></i>
					<span style="margin-left: 10px">{{ scope.row.facultyTitle }}</span>
				</template>
			</el-table-column>
			<el-table-column label="最近提交时间">
				<template slot-scope="scope">
					<i class="el-icon-star-off"></i>
					<span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
				</template>
			</el-table-column>
			<!-- <el-table-column label="操作">
				<template slot-scope="scope">
					<el-button
						size="mini"
						@click="getclientInfo(scope.$index, scope.row)">修改</el-button>
					<el-button
						size="mini"
						type="danger"
						@click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column> -->
		</el-table>
		<!-- 分页 -->
		<el-pagination
			background
			layout="prev, pager, next"
			style="padding-top: 15px; text-align: center"
			:page-size="7"
			@current-change="handleCurrentChange"
			:total="clientNumber">
		</el-pagination>
		<!-- 用户修改抽屉 -->
		<el-drawer
			size="50vw"
			:before-close="beforeUpdateFormClose"
			:visible.sync="showClientInfoForm"
			direction="rtl">
			<client-update-form :clientUpdateData="clientInfo"/>
		</el-drawer>
		<!-- 用户创建抽屉 -->
		<el-drawer
			size="50vh"
			:before-close="beforeCreateFormClose"
			:visible.sync="showClientCreateForm"
			direction="btt">
			<client-create-form/>
		</el-drawer>
	</el-card>
</template>

<script>
import { clientList,clientSearch,clientDelete } from '@/api/sale'
import ClientCreateForm from './Drawer/ClientCreateForm.vue'
import ClientUpdateForm from './Drawer/ClientUpdateForm.vue'
	export default {
		name: 'Client',
		data() {
			return {
				//总记录数
				clientNumber: 0,
				// 获取用户列表分页参数
				clientListParam:{
					startIndex: 0,
					pageSize: 7
				},
				// 用户列表
				clientListData: [],
				// 显示用户创建抽屉
				showClientCreateForm: false,
				// 显示用户修改抽屉
				showClientInfoForm: false,
				// 用户信息
				clientInfo: {}
			}
		},
		props: {
			// 获取父组件参数
		},
		components: {
			ClientCreateForm,
			ClientUpdateForm
		},
		methods:{
			// 用户删除
			handleDelete(index, row){
				clientDelete({clientId: row.clientId}).then(res => {
					this.getClientList()
				})
			},
			// 改变页码
			handleCurrentChange(val) {
				this.clientListParam.startIndex = val - 1
				this.getClientList()
			},
			// 获取用户列表
			getClientList(){
				clientList(this.clientListParam).then(res => {
					console.log(res.data);
					this.clientListData = res.data.records
					this.clientNumber = res.data.total
				})
			},
			// 修改用户抽屉关闭前
			beforeUpdateFormClose(){
				this.getClientList()
				this.showClientInfoForm = false
			},
			// 创建用户抽屉关闭前
			beforeCreateFormClose(){
				this.getClientList()
				this.showClientCreateForm = false
			},
			// 获取用户信息
			getclientInfo(index, row){
				clientSearch({clientId: row.clientId}).then(res => {
					this.clientInfo = res.data.client	
					this.showClientInfoForm = true
				})
			}
		},
		computed:{
				//计算属性
				
		},
		watch:{
				//监听属性
		},
		created() {
			this.getClientList()
		}
	}
</script>

<style scoped>
	.box-card{
		width: 100%;
		height: 100%;
		overflow: auto;
	}
</style>